<template>
  <div class="purchasingCenter">
    <c-title :hide="false" text="进货中心"></c-title>
    <van-search v-model="keyword" shape="round" placeholder="搜索商品" @search="getData" />
    <div class="shopList">
      <div class="lis" v-for="(item, index) in info" :key="index" @click="toGoodDetail(item)">
        <div class="lis_l">
          <img :src="item.thumb" alt="" />
        </div>
        <div class="lis_r">
          <div class="title">{{ item.title }}</div>
          <div class="lis_r_b">
            <div class="lis_r_b_l">
              <div class="inventory">库存：{{ item.stock }}</div>
              <div class="myinventory">您的库存:{{ item.my_stock }}</div>
            </div>
            <div class="lis_r_b_r" @click.stop="addCart(item)">
              <i class="iconfont icon-icon_add"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="posCartB set-pc-style pos" v-show="!show">
      <div class="posCartB_l" @click="show = true">
        <div class="cartIcon">
          <i class="iconfont icon-gouwuche_"></i>
          <div class="num" v-if="cartNum > 0">{{ cartNum }}</div>
        </div>
        <div class="span">
          <div class="text">¥</div>
          {{ countPirce }}
        </div>
      </div>
      <div class="confirmBtn" @click="toBuy">去结算</div>
    </div>
    <van-popup v-model="show" round position="bottom" :style="{ height: '16.66rem' }">
      <div class="popupBox">
        <div class="popupBox_top">
          <div class="popupBox_top_t">
            <div class="popupBox_top_t_l">购物车（共{{ cartNum }}件）</div>
            <div class="popupBox_top_t_r" @click="destroyCart">
              <i class="iconfont icon-fontclass-shanchu"></i>
              清空购物车
            </div>
          </div>
          <div class="popupBox_top_b">
            <template v-for="(item, index) in carts">
              <div class="lis" :key="index" v-if="item.is_failure != 1">
                <div class="lis_img" v-if="item.goods">
                  <img :src="item.goods.thumb" alt="" />
                </div>
                <div class="lis_r" v-if="item.goods">
                  <div class="title">{{ item.goods.title }}</div>
                  <div class="spec">{{ item.goods_option ? item.option_str : "" }}</div>
                  <div class="price_total">
                    <div class="price">¥{{ item.goods.price }}</div>
                    <!-- @change="cartTotalChange(item)" -->
                    <van-stepper @plus="addPlus(item)" @minus="minusPost(item)" v-model="item.total" theme="round" min="0" button-size="22" @blur="inpBlur(item)" />
                  </div>
                </div>
              </div>
            </template>
          </div>
        </div>
        <div class="posCartB">
          <div class="posCartB_l">
            <div class="cartIcon">
              <i class="iconfont icon-gouwuche_"></i>
              <div class="num" v-if="cartNum > 0">{{ cartNum }}</div>
            </div>
            <div class="span">
              <div class="text">¥</div>
              {{ countPirce }}
            </div>
          </div>
          <div class="confirmBtn" @click="toBuy">去结算</div>
        </div>
      </div>
    </van-popup>
    <yz_optionShow
      ref="optionShow"
      :shopCart="false"
      v-model="popupSpecs"
      :goodsInfo="goodsInfo"
      :carts="carts"
      @cartChange="cartChange"
      @closePopup="closePopup"
      @submitAction="submitAction_add"
    ></yz_optionShow>
  </div>
</template>
<script>
import yz_optionShow from "components/ui_components/yz_optionShow";
import { scrollMixin } from "../../utils/mixin";
export default {
  mixins: [scrollMixin], //加载更多
  data() {
    return {
      keyword: "",
      show: false,
      info: [],
      carts: [],
      // 购物车数量
      cartNum: 0,
      // 总价
      countPirce: 0,

      // 规格弹窗 start
      popupSpecs: false,
      goodsInfo: [],
      carts: [],
      // 规格弹窗 end

      page: 1,
      isLoadMore: false,
      total_page: 0
    };
  },
  components: { yz_optionShow },
  activated() {
    this.init();
    this.getData();
    this.getCart();
  },
  methods: {
    init() {
      this.page = 1;
      this.info = [];
      this.isLoadMore = true;
      this.total_page = 0;
      this.show = false;
      this.keyword = "";
      this.carts = [];
      this.countPirce = 0;
      this.cartNum = 0;
    },
    // 去商品详情
    toGoodDetail(item) {
      this.$router.push(this.fun.getUrl("purchasingCenterGood", { id: item.id }));
    },
    // 购物车结算下单
    toBuy() {
      let cartId = [];
      for (let i = 0; i < this.carts.length; i++) {
        cartId.push(String(this.carts[i].id));
      }
      console.log(cartId.toString(), "购物车id");
      this.$router.push(
        this.fun.getUrl(
          "goodsorder",
          {},
          {
            tag: "purchasingCenter",
            cart_ids: cartId.toString()
          }
        )
      );
    },
    inpBlur(e) {
      let { total, id } = e;
      if (total == 0 || !total) {
        this.destroyCartPost(id);
        return;
      }
      this.cartTotalChange(id, total);
    },
    // 规格弹窗 start
    closePopup() {
      this.popupSpecs = false;
    },
    submitAction_add(e) {
      console.log(e);
      this.addPost(e.goodsInfo, e.optionsId);
    },
    // 规格弹窗里增加和减少
    cartChange(e) {
      if(!e.id) return
      let { id, num } = e;
      console.log('eeeeeeee',e)
      if (num == 0) {
        console.log('destroyCartPost')
        this.destroyCartPost(id);
      } else {
        this.cartTotalChange(id, num);
      }
    },
    // 规格弹窗 end
    addCart(item) {
      if (item.has_option == 1) {
        if (item.has_option == 1) {
          this.popupSpecs = true;
          this.goodsInfo = item;
          console.log(this.popupSpecs, "ddddddddddd");
          return;
        }
        return;
      }
      this.addPost(item);
    },
    addPost(item, optionsId) {
      let json = {
        goods_id: item.id,
        total: 1
      };
      if (optionsId) {
        json.option_id = optionsId;
      }
      $http.get("plugin.gradevin-stock.frontend.controllers.member-cart.store", json, ".").then(
        response => {
          if (response.result === 1) {
            // console.log(response.data);
            this.$toast(response.msg);
            // if (optionsId) {
            //   // 成功添加多规格商品到购物车就隐藏规格弹窗
            //   this.popupSpecs = false;
            // }
            this.getCart();
          } else {
            this.$toast(response.msg);
          }
        },
        function(response) {
          console.log(response);
        }
      );
    },
    addPlus(item) {
      let total = item.total + 1;
      this.cartTotalChange(item.id, total);
    },
    minusPost(item) {
      let total = item.total - 1;
      if (total == 0) {
        this.destroyCartPost(item.id);
        return;
      }
      this.cartTotalChange(item.id, total);
    },
    // 修改购物车数量
    cartTotalChange(cartid, total) {
      $http.get("plugin.gradevin-stock.frontend.controllers.member-cart.updateNumV2", { id: cartid, num: total }, ".").then(response => {
        if (response.result === 1) {
          this.$toast(response.msg);
          this.getCart();
        } else {
          this.$toast(response.msg);
        }
      });
    },
    // 移除购物车
    destroyCart() {
      let cartId = [];
      for (let i = 0; i < this.carts.length; i++) {
        cartId.push(String(this.carts[i].id));
      }
      this.destroyCartPost(cartId);
    },
    destroyCartPost(cartId) {
      $http.get("plugin.gradevin-stock.frontend.controllers.member-cart.destroy", { ids: cartId }, ".").then(
        response => {
          if (response.result === 1) {
            this.$toast(response.msg);
            this.show = false;
            this.getCart();
          } else {
            this.$toast(response.msg);
          }
        },
        function(response) {
          console.log(response);
        }
      );
    },
    getCart() {
      $http.get("plugin.gradevin-stock.frontend.controllers.member-cart.index", {}, ".").then(
        response => {
          if (response.result === 1) {
            this.carts = response.data;
            let total = 0;
            let countPirce = 0;
            for (let i = 0; i < this.carts.length; i++) {
              if (this.carts[i].is_failure != 1) {
                total += this.carts[i].total;
                countPirce += Number(this.carts[i].goods.price) * this.carts[i].total;
              }
            }
            this.cartNum = total;
            this.countPirce = countPirce.toFixed(2);
          } else {
            this.$toast(response.msg);
          }
        },
        function(response) {
          console.log(response);
        }
      );
    },
    getData() {
      $http
        .get(
          "plugin.gradevin-stock.frontend.controllers.index.purchase-of-center",
          {
            keyword: this.keyword,
            page: this.page
          },
          "."
        )
        .then(
          response => {
            if (response.result === 1) {
              this.isLoadMore = true;
              this.total_page = response.data.list.last_page;
              if (!this.total_page) {
                this.total_page = 0;
              }
              this.info = response.data.list.data;
            } else {
              this.$toast(response.msg);
            }
          },
          function(response) {
            console.log(response);
          }
        );
    },
    getMoreData() {
      this.isLoadMore = false; // 防止多次请求分页数据
      if (this.page >= this.total_page) {
        return;
      } else {
        this.page += 1;
        $http
          .get("plugin.gradevin-stock.frontend.controllers.index.purchase-of-center", {
            page: this.page,
            keyword: this.keyword
          })
          .then(response => {
            this.isLoadMore = true;
            if (response.result === 1) {
              var nextPageData = response.data.list.data;
              this.info = this.info.concat(nextPageData);
            } else {
              this.page = this.page - 1;
              this.isLoadMore = false;
              this.$toast(r);
            }
          });
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.purchasingCenter {
  .pos {
    position: fixed;
    bottom: 0;
  }
  .posCartB {
    width: 100%;
    height: 3.6rem;
    background: #fff;
    border-top: 1px solid #f0f0f1;
    box-shadow: 0rem -0.06rem 0.31rem 0.03rem rgba(161, 161, 161, 0.16);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 0.75rem;
    padding-left: 1.13rem;
    .confirmBtn {
      padding: 0.78rem 1.44rem;
      font-size: 0.94rem;
      font-weight: 500;
      line-height: 1rem;
      background: #f15353;
      border-radius: 1.88rem;
      color: #ffffff;
    }
    .posCartB_l {
      display: flex;
      align-items: center;
      .span {
        margin-left: 0.78rem;
        color: #f15353;
        font-weight: bold;
        font-size: 1.13rem;
        display: flex;
        align-items: flex-end;
        .text {
          font-size: 0.75rem;
        }
      }
      .cartIcon {
        width: 2.25rem;
        height: 2.25rem;
        background: linear-gradient(329deg, #ff1313 0%, #fb7676 100%);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        position: relative;
        .num {
          position: absolute;
          right: -0.56rem;
          top: -0.16rem;
          min-width: 1.13rem;
          max-width: 2rem;
          height: 1.13rem;
          background: #fca624;
          border-radius: 0.94rem;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          font-size: 0.75rem;
        }
        .icon-gouwuche_ {
          font-size: 1.5rem;
        }
      }
    }
  }
  .shopList {
    padding: 0 0.75rem;
    box-sizing: border-box;
    padding-bottom: 5rem;
    .lis {
      display: flex;
      padding: 0.75rem;
      border-radius: 0.5rem;
      margin-top: 0.63rem;
      background: #fff;
      .lis_l {
        flex-shrink: 0;
        width: 5.63rem;
        height: 5.63rem;
        border-radius: 0.5rem;
        margin-right: 0.63rem;
        img {
          width: 5.63rem;
          height: 5.63rem;
          border-radius: 0.5rem;
        }
      }
      .lis_r {
        flex: 1;
        display: flex;
        flex-direction: column;
        .title {
          text-align: left;
          font-weight: 500;
          font-size: 0.88rem;
        }
        .lis_r_b {
          flex: 1;
          display: flex;
          justify-content: space-between;
          align-items: flex-end;
          .lis_r_b_l {
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: space-between;
            flex: 1;
            text-align: left;
            font-size: 0.81rem;
            color: #6e6e79;
            .inventory {
              line-height: 1.25rem;
              margin-top: 0.7rem;
            }
            .myinventory {
              line-height: 1.25rem;
            }
          }
          .lis_r_b_r {
            width: 1.25rem;
            height: 1.25rem;
            background: #f15353;
            border-radius: 50%;
            .icon-icon_add {
              color: #fff;
              font-size: 11px;
            }
          }
        }
      }
    }
  }
  .popupBox {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .popupBox_top {
      flex: 1;
      padding: 0.94rem 0.75rem;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      .popupBox_top_t {
        flex-shrink: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.31rem;
        .popupBox_top_t_l {
          font-size: 1rem;
          font-weight: bold;
        }
        .popupBox_top_t_r {
          font-size: 0.75rem;
          color: #6e6e79;
          display: flex;
          align-items: center;
          .icon-fontclass-shanchu {
            margin-right: 0.13rem;
          }
        }
      }
      .popupBox_top_b {
        flex: 1;
        overflow-y: scroll;
        display: flex;
        flex-direction: column;
        .lis {
          display: flex;
          justify-content: space-between;
          margin-top: 0.94rem;
          .lis_r {
            flex: 1;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            .title {
              font-size: 0.88rem;
              font-weight: 500;
              text-align: left;
              line-height: 0.9rem;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            .spec {
              font-size: 0.75rem;
              color: #aaaab3;
              text-align: left;
              margin: 0.25rem 0;
              flex: 1;
            }
            .price_total {
              display: flex;
              justify-content: space-between;
              align-items: center;
              .price {
                font-size: 0.88rem;
                font-weight: 500;
                line-height: 1rem;
                color: #f15353;
              }
            }
          }
          .lis_img {
            flex-shrink: 0;
            width: 3.75rem;
            height: 3.75rem;
            background: #f0f0f1;
            border-radius: 0.5rem;
            margin-right: 0.5rem;
            img {
              width: 100%;
              border-radius: 0.5rem;
              height: 100%;
            }
          }
        }
      }
    }
    .posCartB {
      flex-shrink: 0;
    }
  }
}
</style>
